import * as echarts from "echarts";

//地图option
export const map_chart = (item) => {

    var city = null
    return {
        tooltip: {
            show: true,
            formatter: function (params) {
                city = params
                var str = '';
                if (params.componentSubType != "map"){
                    str += "<div style='border: 1px solid #f5f5f5;height: 60px;width: 200px;'><div style='border-bottom: 1px solid blue;width: 100%;height: 20px;'>"+ params.name +"</div>" +
                        "<div style='word-break:  break-all;white-space: pre-wrap;'>地址：山东省泰安市宁阳县</div></div>"
                }else{
                    str += "<div style='border: 1px solid #f5f5f5;min-height: 60px;width: 200px;'><div style='border-bottom: 1px solid blue;width: 100%;height: 20px;font-size: 16px;font-weight: 700;'>"+ params.name +"</div>" +
                        "<div style='word-break:  break-all;white-space: pre-wrap;'>简介：隶属于山东省泰安市，位于鲁中偏西，泰安市南部，东邻新泰市，西连汶上县，南与兖州市交界，东南与曲阜市、泗水县接壤，北以大汶河为界与岱岳区、肥城市相望。</div></div>"
                }
                return str;
            },
        },
        // 地图的阴影底图
        geo: {
            map: 'area',
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            aspectScale: 0.9,
            layoutCenter: ['50%', '52.5%'], //地图位置
            layoutSize: '100%',
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0,228,242,0.5)',
                    shadowBlur: 5,
                    color: '#082A52',
                },
                emphasis: {
                    areaColor: '#082A52',
                },
            },
            z: 2,
        },
        series: [
            {
                type: 'map',
                map: 'area',
                aspectScale: 0.9,
                layoutCenter: ['50%', '50%'], //地图位置
                layoutSize: '100%',
                label: {
                    normal: {
                        show: true,
                        fontFamily: 'SourceHanSansCN',
                        fontSize: '20',
                        color: '#FEFEFE',
                        formatter: function (params) {
                            // console.log(params,"这里能蛋刀吗？")
                            return params.name + "(10)"
                        }
                    },
                    emphasis: {
                        show: true,
                        fontFamily: 'SourceHanSansCN',
                        fontSize: '20',
                        color: '#FEFEFE',
                    },
                },
                select: {
                    // 点击后鼠标离开样式
                    itemStyle: {
                        areaColor: {
                            type: 'linear-gradient',x: 0,y: 300,x2: 0,y2: 0,
                            colorStops: [
                                {offset: 0,color: '#0a56BC', },
                                {offset: 1,color: '#12A6F2',},
                            ],
                            global: true, // 缺省为 false
                        }, // 上层地图面的颜色
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0,0,0, 0.6)',
                        borderWidth: 0.8,
                        areaColor: {
                            type: 'linear-gradient',
                            x: 0,
                            y: 300,
                            x2: 0,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#0a56BC', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#12A6F2',
                                },
                            ],
                            global: true, // 缺省为 false
                        },
                    },
                    emphasis: {
                        shadowColor: 'rgba(0, 0, 0, 1)',
                        shadowBlur: 10,
                        shadowOffsetX: 5,
                        shadowOffsetY: 5,
                        areaColor: {
                            type: 'linear-gradient',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#1090e3', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#0a56bc',
                                },
                            ],
                        },
                    },
                },
                zlevel: 1,
                data: [],
            },
        ],
    }
}

//生成折柱图option
export const line_bar_chart = (item) => {
    let dataList = []
    var yAxisIndex = 0
    if (item.data.some(animal => animal.type === 0)){
        yAxisIndex += 1
    }
    if (item.data.some(animal => animal.type === 1)){
        yAxisIndex += 1
    }
    for (var i = 0;i < item.data.length;i++){
        var num = 0
        if (yAxisIndex == 2){
            item.data[i].type == 0? num=0:num=1
        }
        dataList.push(line_bar_series( item.legend != undefined?item.legend[i]:"", item.data[i].type, item.data[i].data, item.color[i], item.barWidth, item.borderColor, num))
    }

    let dataZoom = getdataZoom(item.dataZoom)
    if (item.legendSeat == undefined){
        item.legendSeat = {
            left: "center"
        }
    }
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {type: 'cross'},
            formatter:function(params){
                var str = params[0].name + "<br/>"
                for (var i = 0;i < params.length;i++){
                    str += params[i].marker + params[i].seriesName + "  " + params[i].value + "<br/>"
                }
                return str;
            },
        },
        legend: {
            show: item.legend != undefined? true : false,
            data: item.legend,
            textStyle: {
                color: item.fontColor != undefined? item.fontColor:'#FFF'
            },
            ...item.legendSeat
        },
        ...dataZoom,
        grid: {
            top: item.grid!=undefined?item.grid[0]:'',
            bottom: item.grid!=undefined?item.grid[1]:'',
            left: item.grid!=undefined?item.grid[2]:'',
            right: item.grid!=undefined?item.grid[3]:'',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: item.xData,
                axisPointer: {
                    label: {
                        backgroundColor: '#FFF',
                        color: '#000',
                        show: true,
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: item.fontColor != undefined? item.fontColor:"#FFF"
                    }
                }
            }
        ],
        yAxis: [
            {
                show: true,
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: item.fontColor != undefined? item.fontColor:"#FFF"
                    }
                },
                axisPointer: {
                    label: {
                        backgroundColor: '#FFF',
                        color: '#000',
                        show: true,
                    }
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                show: item.type == 1,
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: item.fontColor != undefined? item.fontColor:"#FFF"
                    }
                },
                axisPointer: {
                    label: {
                        backgroundColor: item.fontColor != undefined? item.fontColor:'#FFF',
                        color: '#000',
                        show: true,
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: dataList
    };
}

//柱状图或者折线图
function line_bar_series( name, type, data, color, barWidth, borderColor, yAxisIndex){
    if (type == 0 || type == 3){
        return {
            name: name,
            type: type == 0?'bar':'line',
            smooth: true,
            yAxisIndex: yAxisIndex,
            lineStyle: {
                width: 1,
                color: color[0], //绿线颜色
            },
            areaStyle: {
                normal: {
                    color: color.length == 2?new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: color[0] // 折线底下区域渐变色
                    }, {
                        offset: 1,
                        color: color[1] // 折线底下区域渐变色
                    }], false):color[0]
                }
            },
            itemStyle: {
                color: color.length == 2?new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: color[0]
                },
                {
                    offset: 1,
                    color: color[1]

                }]):color[0],
                borderWidth: 1,
                blur: 20,
                shadowColor: '#000',
            },
            barWidth: barWidth==undefined?'25px':barWidth+'px',
            data: data,
        }
    }else {
        return {
            name: name,
            type: type == 0?'bar':'line',
            smooth: true,
            yAxisIndex: yAxisIndex,
            lineStyle: {
                width: 1,
                color: color[0], //绿线颜色
            },
            barWidth: barWidth==undefined?'25px':barWidth+'px',
            data: data,
        }
    }
}

//下方滚动条
function getdataZoom(dataZoom){
    return {
        dataZoom:[
            {
                type: 'slider',
                show: dataZoom?true:false,
                height: 20,
                bottom: 0,
                start: dataZoom?50:0,
                end: 100,
                textStyle: {
                    color: '#d4ffff',
                    fontSize: 11,
                },
            },
            {
                type: 'inside'
            }
        ]
    }
}

//地图标点
export const outsidePunctuation = (data, colorList) =>{
    return getPunctuation(data, colorList)
}
function getPunctuation(data, colorList) {
    return {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
            brushType: 'stroke',
        },
        showEffectOn: 'render',
        itemStyle: {
            normal: {
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [
                        {
                            offset: 0,
                            color: colorList[0],
                        },
                        {
                            offset: 0.8,
                            color: colorList[1],
                        },
                        {
                            offset: 1,
                            color: colorList[2],
                        },
                    ],
                    global: false, // 缺省为 false
                },
            },
        },
        label: {
            normal: {
                color: item.fontColor != undefined? item.fontColor:'#FFF',
                formatter: '{b}',
                position: 'top',
                show: true,
            },
            emphasis: {
                show: true,
            },
        },
        symbol: 'circle',
        symbolSize: function (val) {
            // return (val[2] / maxData) * 4;
            return 10
        },
        data: data,
        zlevel: 1,
    }
}
